<!doctype html>
<html lang="en">
                                                                                    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/signin.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/js/jquerySession.js"></script>
    <script type="text/javascript">
        //请求json，输出是json
        function login(){

            /* 1. 获取表单 含 name 属性字段值
               2. 将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串
            */
            var loginFormData = $("#loginForm").serializeArray();

            //alert("序列化为json格式为："+JSON.stringify(serializeJson)); //JSON.stringify(json对象) 将json对象转化为json字符串

            /*  json 对象数组
                var loginData = JSON.stringify(loginFormData);
                console.log(loginData.trim('[', 'left'));
                alert(loginData);
            */
            /* 将json对象数组转为 json 字符串，后台接收处理 */
            var t = "{";
            $.each(loginFormData, function(i, value){
                t += "\"" + value.name + "\":\"" + value.value + "\"";
                if(loginFormData.length-1!=i){
                    t += ',';
                }
            });
            t += "}";
            //console.log(t);
            $.ajax({
                type:'post',
                url:'/api/user/ajaxLogin',
                contentType:'application/json;charset=utf-8',
                data:t,
                success:function(data){
                    if(data.userName != "no"){
                        //alert("回显字段 userName = " + data.userName);
                        $.session.set('userName', JSON.stringify(data.userName));
                        location.href="/week/report/index";
                    }else{
                        alert("用户不存在");
                    }

                }
            });
        }
    </script>

    <!-- 自定义 CSS 样式 -->
    <style type="text/css">
    .gn-center {
        margin-top:-80px;
    }
    </style>

    <title>Login</title>
</head>
    <body>
        <form id ="loginForm" class="form-signin"><!--  method="post" action="/api/user/formLogin" -->
            <!-- text-center 居中 -->
            <h1 class="h3 mb-3 font-weight-normal text-center gn-center">TinyCoreManage</h1>

            <input type="text" id="inputEmail" name = "userName" class="form-control">
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

            <input class="btn btn-lg btn-primary btn-block" type="button" onclick="login()" value="login">


        </form>
    </body>
</html>